<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>管理系统</title>
    <link rel="stylesheet" type="text/css" href="./css/element-plus.index.css">
    <script type="text/javascript" src="./js/vue.global.3.2.39.js"></script>
    <script type="text/javascript" src="./js/element-plus.2.2.15.js"></script>
    <script type="text/javascript" src="./js/element_plus_icons.2.0.9.js"></script>
    <script type="text/javascript" src="./js/axios.min.0.24.0.js"></script>
    <script type="text/javascript" src="./js/common.js"></script>
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
        }

        .header_title {
            font-size: 32px;
            color: #92CC61;
            font-weight: bold;
            font-family: "微软雅黑", "黑体", "宋体", Verdana, Arial, sans-serif;
            margin-left: 20px;
            line-height: 80px;
        }

        .el-header, .el-footer {
            background-image: url('img/bg_header.png');
            background-repeat: no-repeat;
            background-color: #CFC095;
        }

        .el-header img, .el-header span {
            float: left;
        }

        .toolbar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            right: 20px;
            float: right;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh;">
        <el-header height="80px">
            <div>
                <img src="./img/logo_index.png" alt="logo" style="height: 50px;margin-top: 10px;margin-right: 10px;">
                <span class="header_title">鲜花购买后台管理</span>
            </div>
            <div class="toolbar">
                <el-dropdown>
                    <el-icon style="margin-right: 8px; margin-top: 1px">
                        <avatar/>
                    </el-icon>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>View</el-dropdown-item>
                            <el-dropdown-item>Add</el-dropdown-item>
                            <el-dropdown-item>Delete</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <span> 欢迎你:{{currentUser.realName}} <br>
                    <el-tag class="mx-1" effect="dark">管理员</el-tag>
                </span>
            </div>
        </el-header>
        <el-container>
            <el-aside>
                <el-scrollbar >
                    <el-menu :default-openeds="['1']" @select="handleSelect" >
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon>
                                    <copy-document/>
                                </el-icon>
                                类别管理
                            </template>
                            <el-menu-item index="cat/cat_list.html">
                                <el-icon>
                                    <right/>
                                </el-icon>
                                类别列表
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon>
                                    <food/>
                                </el-icon>
                                新品管理
                            </template>
                            <el-menu-item index="foods/foods_list.html">
                                <el-icon>
                                    <right/>
                                </el-icon>
                                鲜花列表
                            </el-menu-item>
                            <el-menu-item index="foods/foods_add.html">
                                <el-icon>
                                    <right/>
                                </el-icon>
                                录入新品
                            </el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon>
                                    <shopping-cart/>
                                </el-icon>
                                订单管理
                            </template>
                            <el-menu-item index="orders/orders_list.html">
                                <el-icon>
                                    <right/>
                                </el-icon>
                                订单列表
                            </el-menu-item>
                            <el-menu-item index="order_search.html">
                                <el-icon>
                                    <right/>
                                </el-icon>
                                订单查询
                            </el-menu-item>
                        </el-sub-menu>

                        <el-menu-item index="/changepwd"> <el-icon><lock></lock></el-icon> 修改密码</el-menu-item>
                        <el-menu-item index="/logout"> <el-icon><switch-button></switch-button></el-icon> 退出登录</el-menu-item>
                    </el-menu>
                </el-scrollbar>
            </el-aside>
            <el-main>
                <iframe :src="frameSrc" style="width: 100%;height: 100%;" frameborder="no"></iframe>
            </el-main>
        </el-container>
        <el-footer>
            <div style="text-align: center">
                版权所有：鲜花购买 - 软通动力 <br>
                联系电话:13709147189 地址：陕西省西安市高新区天谷八路211号西安环普科技产业园E座201室
            </div>
        </el-footer>
    </el-container>
</div>

<script type="text/javascript">
    const options = {
        data() {
            return {
                currentUser: {realName:'测试用户',role:0},
                frameSrc: './home_page.html'
            };
        },
        //生命周期钩子函数
        created(){
            //获取当前用户信息
            let str=sessionStorage.getItem('currentUser');
            if(str){
                this.currentUser=JSON.parse(str);
            }else{
                window.location.href='./index.html';
            }
        },
        methods:{
            handleSelect(index){
                if(index=='/logout'){
                    sessionStorage.clear();
                    axios.post('/admin/logout').then(resp=>{
                    });
                    window.location.href='index.html';
                }else if(index=='/changepwd'){

                }else{
                    this.frameSrc="./"+index;
                }
            }
        }
    };
    const app = Vue.createApp(options);
    app.use(ElementPlus);
    for (const [iconName, iconComp] of Object.entries(ElementPlusIconsVue)) {
        if (iconName == 'Menu') {
            app.component('IconMenu', iconComp);
        } else {
            app.component(iconName, iconComp);
        }
    }
    var vm = app.mount("#app");
</script>
</body>
</html>